<template>
	<view id="profit">
		<view class="prof-top">
			<view class="machineTop">
			    <view class="total">
			        <view class="num">{{data.totalMoney}}</view>
			        <view class="name">累计收益(元)</view>
			    </view>
			    <!--<div class="msg" tapmode onclick="openWin({name:'pages.profitDetails'})"> <span>信息详情</span></div>-->
			    <view class="month">
			        <view class="monthList">
			            <view class="num">{{data.callBack}}</view>
			            <view class="name">机具返现(元)</view>
			        </view>
<!-- 			        <view class="monthList">
			            <view class="num">{{data.cashBackFlow||0}}</view>
			            <view class="name">流量费返现(元)</view>
			        </view> -->
			        <view class="monthList">
			            <view class="num">{{data.fenrun}}</view>
			            <view class="name">分润(元)</view>
			        </view>
			    </view>
			</view>
			<view class="screenBox">
			    <view>
			        <picker @change="typeChange" :value="typeIndex" :range="typeList" range-key="label">
						<view>类型：{{typeList[typeIndex].label}} <i class="iconfont icon-right"></i></view>
					</picker>
			    </view>
				<view style="text-align:right">
					<picker mode="date" fields="month" :value="month"  @change="monthChange" @cancel="monthCancel">
						<view class="uni-input">月份：{{month_name}} <i class="iconfont icon-right"></i></view>
					</picker>
				</view>
			</view>
			<uni-collapse  accordion  style="margin-top:20rpx;padding-bottom: 200rpx;">
				<view v-for="(item,index) in list" :key="index" >
					<uni-collapse-item  >
						<template v-slot:title>
							<uni-list>
								<uni-list-item :title="item.name" :thumb="item.cpCover?item.cpCover:'../../static/logo.png'">
									<template slot="footer">
										<view style="display:flex;align-items: center;">
											<view class="dotted" v-if="item.haveSize>0">{{item.haveSize|formatNum}}</view>
											<view style="font-size:30rpx;color:#888;">￥{{item.money}}</view>
										</view>
									</template>
								</uni-list-item>
							</uni-list>
						</template>
						<view class="content" v-for="(pr,pi) in item.children" :key="pi" @click="profitDetail(pr)">
							<image :src="pr.cpCover" class="imgs" v-if="pr.cpCover"></image>
							<image src="../../static/logo.png" class="imgs" v-else></image>
							<view class="text">{{pr.name}} {{pr.mode}}</view>
							<view class="icon arrow">
								<view class="dotted" v-if="pr.haveSize>0">{{pr.haveSize|formatNum}}</view>
								<view >{{pr.money}}</view>
							</view>
						</view>
					</uni-collapse-item>
				</view>
				<view  style="text-align: center;padding-bottom:50rpx;" v-if="noData">
					<image src="../../static/mescroll-empty.png" mode="widthFix" style="width:500rpx;"/>
					<view style="text-align: center;">当前月份暂无数据</view>
				</view>
			</uni-collapse>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				typeList:[{label:'全部',value:0},{label:'机具返现',value:1},{label:'分润',value:2}],
				// typeList:[{label:'全部',value:0},{label:'机具返现',value:1},{label:'流量费返现',value:3},{label:'分润',value:2}],
				typeIndex:0,
				month_name:'全部',
				month:'',
				list:[],
				data:{
					totalMoney:0,
					callBack:0,
					fenrun:0
				},
				noData:false
			}
		},
		filters:{
			formatNum(e){
				return e>99?99:e
			}
		},
		onShow() {
			this.typeIndex=0
			this.month=''
			this.month_name='全部'
			this.getProfitData()
			this.getProfitList()
			this.getEbar()
		},
		methods: {
			getEbar(){
				this.httpClient.post('profit/app/profitSum/getIsHaveDhd', {},false).then(res => {
					if(res.data>0){
						let size=''
						if(res.data>99){
							size=99
						}else{
							size=res.data
						}
						uni.setTabBarBadge({
							index: 2, //tabbar下标
							text:size.toString()
						})
					}else{
						uni.removeTabBarBadge({index: 2})
					}
				}).catch(err=>{
					uni.removeTabBarBadge({index: 2})
				})
			},
			typeChange(e){
				this.typeIndex=e.detail.value
				this.getProfitList()
			},
			monthChange(e){
				this.month=e.detail.value
				this.month_name=e.detail.value
				this.getProfitList()
			},
			monthCancel(){
				this.month=''
				this.month_name='全部'
				this.getProfitList()
			},
			getProfitData(){
				this.httpClient.post('profit/app/profitSum/index', {},false).then(res=>{
					if(res.code==200){
						this.data=res.data
					}
				})
			},
			getProfitList(){
				this.httpClient.post('profit/app/profitSum/getProfitLists', {
					profitType: this.typeList[this.typeIndex].value,
					month: this.month
				}).then(res=>{
					if(res.code==200){
						this.list=res.data
						if(this.list.length==0){
							this.noData=true
						}else{
							this.noData=false
						}
					}
				})
			},
			profitDetail(e){
				uni.navigateTo({
					url:'profitDetail?type='+this.typeList[this.typeIndex].value+'&name='+e.name+"&id="+e.proId+'&month='+this.month
				})				
			}
		}
	}
</script>

<style scoped lang="scss">
	#profit{
		.linear {
		    background: #3aacff;
		    color: rgb(255, 255, 255);
		    color:#fff;
		    text-align: center;
		    position: relative;
		}
		.store {
		    padding: .3rem 0;
		    text-align: center;
		}
		.prof-top {
		    position: absolute;
		    width: 100%;
		    height: 12rem;
		}
		.machineTop {
		    height: 9rem;
		    /*background: #3aacff;*/
		    background-image: url('../../static/index/profitBg.png');
		    background-size: 100% 100%;
		    color: #fff;
		}
		.machineTop .total {
		    text-align: center;
		    /*padding-top: 0.5rem;*/
		}
		.machineTop .name {
		    font-size: 0.75rem;
		}
		.machineTop .num {
		    font-size: 1.2rem;
		}
		.machineTop .month {
		    margin-top: 0.5rem;
		    display: flex;
		    align-items: center;
		}
		.machineTop .monthList {
		    flex: 1;
		    text-align: center;
		    position: relative;
		}
		.monthList:before {
		    content:'';
		    width: 1px;
		    height: 1.2rem;
		    position: absolute;
		    top: 50%;
		    right: 00rem;
		    margin-top: -0.6rem;
		    background: #fff;
		}
		.machineTop .msg {
		    text-align: right;
		}
		.msg span {
		    background: #EEE773;
		    color: #fff;
		    padding: 0.4rem 1rem;
		    border-top-left-radius: 0.5rem;
		    border-bottom-left-radius: 0.5rem;
		    font-size: 0.85rem;
		}
		.screenBox{
			display:flex;
			view{
				flex:1;
			}
		}
		
		.screenBox {
		    height: 3rem;
		    box-sizing: border-box;
		    padding: 0 0.5rem 0 1rem;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    font-size: 0.85rem;
		    border-bottom: 1px solid #f2f2f2;
		    background: #fff;
		    overflow: hidden;
		}
		.weui-cells:before {
		    border-top: none;
		}
		.weui-cells:after {
		    border-bottom: none;
		}
		.weui-cell_access .weui-cell__ft:after {
		    width: 0;
		    height: 0;
		    border-width: 0px 0px 0 0;
		    display: none;
		}
		.vux-cell-value {
		    width: 100%;
		    display: block;
		    line-height:1.5rem;
		    text-align: center;
		}
		.dp-header .dp-item.dp-right {
		    color: #3aacff;
		}
		.weui-cell__ft {
		    text-align: left
		}
		.weui-cells__title {
		    padding:0;
		    display: none;
		}
		.screenBox .box {
		    display: flex;
		    align-items: center;
		}
		.screenBox .box .name {
		    display: flex;
		    align-items: center;
		}
		.screenBox .box .name i {
		    color: #999;
		    margin-left: 0.3rem;
		}
		#popover-demo-content {
		    background: #fff;
		    color: #333;
		    overflow: hidden;
		    border: 1px solid #eee;
		    border-radius: 3px
		}
		#popover-demo-content .list {
		    height: 2.5rem;
		    width: 6rem;
		    overflow: hidden;
		    line-height: 2.5rem;
		    padding: 0 1.5rem;
		    font-size: 0.75rem;
		    border-bottom: 1px solid #eee;
		    text-align: center;
		}
		.productBox {
		    margin: 1rem;
		    position: absolute;
		    top: 11.5rem;
		    left:0;
		    right: 0;
		    bottom: 0px;
		    height: auto;
		    overflow-y: scroll;
		}
		.productBox .productList {
		    background: #fff;
		    font-size: 0.9rem;
		    border: 1px solid #f2f2f2;
		    margin-bottom: 0.65rem;
		    border-radius: 0.5rem;
		}
		.productList .product {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding: 0.8rem 1rem;
		    border: 1px solid #f2f2f2;
		}
		.productList .name {
		    display: flex;
		    align-items: center;
		}
		.productList .cover {
		    width: 2.5rem;
		    height: 2.5rem;
		    border-radius: 50%;
		    margin-right: 0.5rem;
		}
		.productList .value {
		    position: relative;
		    color: #f00;
		}
		.productList .value span {
		    width: 1.25rem;
		    height: 1.25rem;
		    line-height: 1.25rem;
		    display: inline-block;
		    background: #f00;
		    text-align: center;
		    border-radius: 50%;
		    color: #fff;
		    margin-left: 0.5rem;
		}
		.productList .value .up {
		    width: 0.9rem;
		    height: 0.9rem;
		    margin-left: 0.3rem;
		    vertical-align: middle;
		}
		.productList .secondList .value {
		    padding-right:1.5rem;
		}
		.productList .secondList .value:after {
		    content:'';
		    width: 0.45rem;
		    height: 0.45rem;
		    position: absolute;
		    top: 50%;
		    right: 0.3rem;
		    margin-top: -0.3rem;
		    background: transparent;
		    border: 1px solid #999;
		    border-top: none;
		    border-right: none;
		    z-index: 2;
		    -webkit-border-radius: 0;
		    border-radius: 0;
		    -webkit-transform: rotate(-135deg);
		    transform: rotate(-135deg);
		}
		.productList .secondBox .secondList {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding: 0.8rem 0.8rem 0.8rem 1.5rem;
		    border-bottom: 1px solid #f2f2f2;
		}
		.secondBox .secondList:last-child {
		    border-bottom: none;
		}
		
		
		.content{
			padding:20rpx 20rpx 20rpx 80rpx;border-top:1rpx dashed #eee;color:#888;
			display:flex;align-self: center;
			.imgs{
				width:50rpx;height:50rpx;
			}
			.text{
				flex:1;line-height:50rpx;margin-left:20rpx;font-size:28rpx;
			}
			.icon{
				width:200rpx;text-align:right;padding-right:5rpx;display:flex;align-items: center;
			}
		}
		.dotted{
			background-color: #FF3500;border-radius: 50%;margin-right:20rpx;font-size:22rpx;color:#FFF;width:32rpx;height:32rpx;line-height:32rpx;text-align: center;
		}
		
	}
</style>
